<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 使用卡片 -->
      <el-card class="box-card">
        <!-- 全局Excel子组件, :on-success上传Excel文件成功回调函数-->
        <upload-excel :on-success="handleSuccess" />
      </el-card>
    </div>
  </div>
</template>

<script>
import { formatExcelDate } from '@/utils'
import { importEmployeeAPI } from '@/api/employees'
export default {
  name: 'Excel',

  data() {
    return {

    }
  },

  methods: {
    // 导入成功以后的回调函数,拿到结果和表头
    async handleSuccess({ results, header }) {
    //   console.log(results)
      // 因为数据与后端要的内容不一致,所以要预处理数据
      const data = this.transExcel(results)
      //   console.log(data)
      //   console.log(header)

      // 然后,调用接口
      const res = await importEmployeeAPI(data)

      // 反馈用户
      this.$message.success(res.message)

      // 返回路由
      this.$router.back()
    },

    // 定义格式化数据方法
    transExcel(results) {
      // 根据接口文档定义枚举
      const userRelations = {
        '入职日期': 'timeOfEntry',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName',
        '聘用形式': 'formOfEmployment'
      }

      // 处理results,用map方法,拿到每一项
      return results.map(item => {
        // 首先定义一个最终数据结果
        const obj = {}

        // 取出每一项的key,返回一个中文名的数组,用Object.keys()取
        const contentKeys = Object.keys(item)
        // console.log(contentKeys)

        // 然后遍历这个数组,拿到每一个中文名
        contentKeys.forEach(key => {
          // 根据枚举,拿到每一个对应的英文名,返回一个英文名数组
          const transKey = userRelations[key]
          //   console.log(transKey)

          // 再判断是否是需要处理的时间
          if (transKey === 'timeOfEntry' || transKey === 'correctionTime') {
            // 引入并调用formatExcelDate,处理Excel时间的方法,然后new Date处理之后的结果并赋值
            obj[transKey] = new Date(formatExcelDate(item[key]))
          } else {
            // 如果不是时间,无需处理,直接赋值
            obj[transKey] = item[key]
          }
        })

        // 返回obj
        return obj
      })
    }
  }

}
</script>

<style>

</style>
